<template>
	<view class="page">
		<fu-custom :isBack="true" :isBottom="true" bgColor="bg-white">
			<view slot="content">商品管理</view>
		</fu-custom>
		<fu-tab :tabs="tabItem" line-color='#FC6497' active-color='#FC6497' :scrollspy="true" :sticky="true" :top="0"
			@change="changeGoodsList" :current="requestType" current-key="id"></fu-tab>

		<!-- 商品列表 start -->
		<view class="fu-goods">
			<block v-for="item in listDataReverse" :key="item.id">
				<view class="fu-goods-box margin-bottom-sm">

					<view class="fu-goods-pic">
						<view class="fu-pic"><fu-image :src="item.thumb"
								mode="aspectFill" /></view>
					</view>
					<view class="fu-goods-name">
						<text class="text-cut-2 text-df">{{ item.name }}</text>
					</view>
					<view class="fu-goods-action flex justify-between align-center margin-bottom-sm">
						<view class="text-sm fu-goods-price text-price">
							<text class="text-df text-bold">{{ item.shop_price }}</text>
						</view>
					</view>
				
					<view class="text-999 flex justify-between" style="padding: 0 16rpx;">
						<switch class="switch" :color="item.is_sale ? '#FC6497' : ''" @change="changeState(item)"
							:checked="item.is_sale ? true : false"></switch>
					</view>
					<view class="fu-goods-action flex justify-between margin-bottom-sm" v-if="requestType != 2">
						<view class="text-sm fu-action-btn" @click="editGoods(item.id)">编辑</view>
						<view class="text-sm fu-action-btn" @click="delGoods(item)">
							<image class="fu-goods-del" src="../../../../static/del.png" mode="aspectFill"
								@click="delGoods(item)" />
								<text>删除</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 商品列表 end -->
		<view class="batch-view flex justify-end align-center" v-show="requestType == 1 || requestType == 0">
			<view class="bt" @click="toBatchGoods">
				批量管理
			</view>
		</view>
		<!-- 退出登录按钮 end -->

		<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
			:listDataLength="listDataLength" :isLoadInit="isLoadInit" emptyImage="goods"></fu-empty>
		<view class="btn_cloce" v-show="requestType == -1">
			<view class="btn" @click="addGoods">添加商品</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @author
	 */
	import paging_list from '@/common/mixin/paging_list.js';
	import {
		navigateToLogin
	} from '@/common/utils/utils.js';
	export default {
		mixins: [paging_list],
		data() {
			return {
				// radioColor: '#18BB3B',
				goodsList: [{
					id: 1
				}, {
					id: 2
				}], // {Array.Object} 商品列表信息
				tabItem: [
					// {Array} tab栏的item
					{
						id: -1,
						name: '全部'
					},
					{
						id: 1,
						name: '出售中'
					},
					{
						id: 0,
						name: '已下架'
					},
					// { id: 2, name: '审核中' },
				],
				requestType: -1,
				minixPagingListsApi: global.apiUrls.getGoodsList, //混入获取列表接口名
				allowOnloadGetList: false, //是否允许onlaod加载数据
				is_check: false
			};
		},
		onLoad() {},
		onShow() {
			if (!global.token) {
				navigateToLogin();
			}
			this.allowOnloadGetList = false;
			// // 获取数据
			// this.pagingListGetLists();
			this.pagingListToggle();
		},
		computed: {
			listDataReverse() {
				return this.listData.reverse();
			}
		},
		methods: {
			// 预览
			previewGoods(item) {
				console.log(item, item)
				let data = item
				data.body = item.body,
				// {
				// 	img_list: item.images,
				// 	videoInfo: item.video_img,
				// 	name: item.name,
				// 	shop_price: item.shop_price,
				// 	// body: item.body,
				// 	// body: item
				// };
				data = JSON.stringify(data);
				uni.setStorageSync('CONTENT', data);
				uni.navigateTo({
					url: '/pages/tab/management/goodsPreview/index?goods_id=' + item.id
				});
			},
			toBatchGoods() {
				uni.navigateTo({
					url: '/pages/tab/management/batchGoods/index?requestType=' + this.requestType
				});
			},
			// 编辑商品
			editGoods(id) {
				uni.navigateTo({
					url: '/pages/tab/management/addGoods/index?id=' + id
				});
			},
			/**
			 * @description 添加商品
			 */
			addGoods() {
				uni.navigateTo({
					url: '/pages/tab/management/addGoods/index'
				});
			},
			/**
			 * @description 查看评价
			 * @param {Object} item 事件入参
			 */
			lookEvalue(item) {
				let data = JSON.stringify(item);
				console.log(data);
				uni.navigateTo({
					url: '/pages/order/evalue/evalue/index?item=' + data
				});
			},
			/**
			 * @event 改变tab
			 * @param {Number} data.id - 通过tab传过来的商品展示类型
			 */
			changeGoodsList(data) {
				if (this.is_check) return
				this.is_check = true
				this.requestType = data.id;
				this.pagingListToggle();
			},
			/**
			 * @description 混入传参钩子函数
			 * @param type 获取数据类型
			 */
			pagingListPostData() {
				console.log('状态改变', this.requestType);
				return {
					type: this.requestType
				};
			},
			/**
			 * @event 商品上架or下架状态改变
			 * @param {Objcet} item - 用户点击的商品
			 * @property {Number} data.id - 商品id
			 * @property {Number} data.is_sale - 商品状态
			 */
			changeState(item) {
				const that = this;
				if (item.is_sale == 1) {
					this.$util.showModal({
						title: '提示',
						content: '确定下架商品吗？',
						confirmColor: '#FC6497',
						success: function(res) {
							if (res.confirm) {
								that.$api
									.post(global.apiUrls.goodsPutaway, {
										id: item.id,
										is_sale: 0
									})
									.then(res => {
										if (res.data.code == 1) {
											that.$message.info('操作成功');
											that.pagingListToggle();
										}
									});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else if (item.is_sale == 0) {
					this.$util.showModal({
						title: '提示',
						content: '确定上架商品吗？',
						confirmColor: '#FC6497',
						success: res => {
							if (res.confirm) {
								this.$api
									.post(global.apiUrls.goodsPutaway, {
										id: item.id,
										is_sale: 1
									})
									.then(res => {
										if (res.data.code == 1) {
											this.$message.info('操作成功');
											this.pagingListToggle();
										}
									});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			/**
			 * @event 商品状态改变
			 * @param {Objcet} item - 用户点击的商品
			 * @property {Number} data.id - 商品id
			 */
			delGoods(item) {
				const that = this;
				this.$util.showModal({
					title: '提示',
					content: '确定删除商品',
					confirmColor: that.$store.state.themeColor,
					success: function(res) {
						if (res.confirm) {
							that.$api.post(global.apiUrls.delGoods, {
								id: item.id
							}).then(res => {
								if (res.data.code == 1) {
									that.$message.info('删除成功');
									that.pagingListToggle();
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	// 上架
	.putaway {
		color: #ffffff !important;
		border: none !important;
		background: $bgtheme !important;
	}

	.page {
		width: 100%;
	}

	.add-goods {
		color: #1A76F2;
	}

	.fu-goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		padding: 24rpx;

		.fu-goods-box {
			display: flex;
			flex-direction: column;
			position: relative;
			width: 49%;
			border-radius: 16rpx;
			overflow: hidden;
			background-color: #ffffff;

			.fu-goods-del {
				position: relative;
				z-index: 10;
				// 10rpx
				top: 0rpx;
				right: 16rpx;
				width: 44rpx;
				height: 44rpx;
			}

			.fu-goods-pic {
				width: 100%;
				height: 334rpx;

				.fu-pic {
					width: 100%;
					height: 100%;
				}
			}

			.fu-goods-name {
				padding: 16rpx;
				color: #000000;
				// height: 112rpx;
			}

			.fu-goods-action {
				padding: 0 16rpx;
				margin-top: 24rpx;

				.fu-goods-price {
					color: #FB2A25;
				}

				.fu-action-btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 150rpx;
					height: 56rpx;
					line-height: 56rpx;
					border-radius: 28rpx;
					text-align: center;
					color: #333333;
					background-color: #F6F6F6;
				}

				.active {
					background-color: $bgtheme;
					color: #fff;
				}
			}
		}
	}

	.batch-view {
		position: fixed;
		left: 0;
		right: 0;
		bottom: calc(var(--window-bottom));
		background-color: #FFFFFF;
		height: 100rpx;

		.bt {
			background-color: $bgtheme;
			width: 200rpx;
			height: 72rpx;
			color: #FFFFFF;
			border-radius: 36rpx;
			text-align: center;
			line-height: 72rpx;
			margin-right: 32rpx;
		}
	}

	// 退出登录按钮 start
	.btn_cloce {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		z-index: 1000;
		.btn {
			height: 110rpx;
			text-align: center;
			line-height: 110rpx;
			color: $theme;
			font-size: 32rpx;
		}
	}

	// 退出登录按钮 end

	// 退出登录按钮 end
	.top-border-line {
		border-top: 20rpx solid #F8F8F8;
	}
</style>